<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Jpetstore后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <script src="../js/index.js"></script>

    <!-- 在线导入 -->
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!-- 本地导入 -->

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>



</head>
<body>
<div id="app">

    <el-container style="height: 100%">
        <el-aside width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%">
            <el-menu :default-openeds="['1', '3']" style="height: 100%"
                     background-color="rgb(48,65,86)"
                     text-color="#fff"
                     :collapse="isCollapse"
            >
                <div style="height: 60px;line-height: 60px;text-align: center">、
                    <img src="/images/logo-topbar.gif">
                </div>

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-s-home"></i>
                        <span slot="title">查看首页</span></template>
                    <el-menu-item index="1-1" @click="handleMainFormClick">首页信息</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group title="分类选择">


                        <el-menu-item index="1-1-1" @click="handleCategory">分类选择</el-menu-item>



                    </el-menu-item-group>
                    <el-menu-item-group title="全部商品">
                        <el-menu-item index="1-2" @click="handleAllItem">全部商品</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>
                        <span slot="title">账户管理</span></template>
                    <el-menu-item index="2-1" @click="handleAccountClick">所有账户</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>
                        <span slot="title">个人中心</span></template>
                    <el-menu-item-group>
                        <template slot="title">个人中心</template>
                        <el-menu-item index="3-1"@click="handlePersonClick">个人中心</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span></template>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container >
            <el-header style=" font-size: 12px; display: flex">
                <div style="flex:1;font-size: 18px; width: 200px">
                    <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                </div>
                <div style="flex:1.2;font-size: 25px">
                    <b style="color: black">Jpetstore后台管理系统</b>
                </div>
                <el-dropdown>
                    <i class="el-icon-arrow-down"></i>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                <span>朱阳</span>
            </el-header>

            <el-main > <div>


                <b style="font-size: 25px ;color: rgb(255,158,13) ;margin-left: 10px">The Product Of JPetStore</b>
                <BR>
                <br>
                <br>
            </div>

                <div style="padding: 10px  0">
                    <el-input style="width: 500px" suffix-icon="el-icon-search" placeholder="请输入Product名" v-model="userid1"></el-input>


                    <el-button style="margin-left: 5px" type="primary" @click="search">搜索</el-button>
                    <el-button style="margin-left: 10px" type="warning" @click="reset">重置</el-button>

                </div>
                <el-table :data="tableData" stripe header-cell-class-name="headerBg" >
                    <el-table-column prop="productid" label="productid" width="300">
                    </el-table-column>
                    <el-table-column prop="category" label="category" width="300">
                    </el-table-column>
                    <el-table-column prop="name" label="name" width="200">
                    </el-table-column>
                    <el-table-column prop="descn" label="descn" width="300">
                    </el-table-column>
                    <el-table-column label="选择">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="handleEdit(scope.row.productid)">选择<i class="el-icon-check"></i></el-button>

                        </template>
                    </el-table-column>
                </el-table>



            </el-main>
        </el-container>
    </el-container>
</div>



<script type="text/javascript">


    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };


            return {
                // tableData: Array(10).fill(item),
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                pageNum: 1,
                pageSize: 2,
                total:100,
                username:" ",
                userid:" ",
                email:" ",
                address:" ",
                tableData: [] ,// 用于存储从后端获取的产品信息
                dialogFormVisible:false,
                form:{},
                userid1: " ",
                productId:" ",
                email1:" ",
                addr11:" ",

                multipleSelection:[],



            }
        },
        mounted() {
            const urlParams = new URLSearchParams(window.location.search);
            const categoryId = urlParams.get('categoryId');
           // console.log(categoryId)



            axios.get('http://localhost:8080/categories/product',
                {
                    params: {
                        categoryId: categoryId
                    }

                }
            )
                .then(response => {
                    // 请求成功时更新产品列表
                    this.tableData = response.data.data;
                    console.log(response.data);
                     console.log(tableData);
                    // alert(tableData);
                })
                .catch(error => {
                    // 处理请求错误
                    console.error('Error fetching products:', error);
                });
        },

        methods: {
            collapse() {
                this.isCollapse = !this.isCollapse; // Toggle the value of isCollapse
                if(this.sideWidth)
                {
                    this.sideWidth= 64
                    // this.collapseBtnClass='el-icon-s-unfold'
                }
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.pageNum=pageNum
                this.load()
            },
            handleAccountClick(){
                window.location.href = "account.html";
            },
            handleMainFormClick(){
                window.location.href="main.html";
            },
            handleCategory(){
                window.location.href="category.html";
            },
            handleAllItem(){
                window.location.href="allitem.html";
            },

            search(){
                axios.get("http://localhost:8080/accounts/accountSearch",{
                    params:{
                        userid1:this.userid1,
                        email1:this.email,
                        addr1:this.addr1
                    }
                })
                    .then(res=>
                    {
                        this.tableData = response.data.data;
                    })
                    .catch(error => {
                        // 处理请求错误
                        console.error('Error fetching products:', error);
                    });

            },
            handleEdit(productId){
                const url =`item.html?productId=${productId}`;
                window.location.href = url;
            },
            handlePersonClick(){
                window.location.href="person.html"
            }


        }



    })
</script>

</body>
</html>